<template>
    <div>
        <!--面包屑导航区域-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!--卡片视图-->
        <el-card class="box-card">
            <!--添加角色按钮-->
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                </el-col>
            </el-row>

            <!--角色列表区域-->
<!--            <el-table :data="goodsCateList" border stripe>
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="cat_name" label="分类名称"></el-table-column>
                <el-table-column prop="cat_deleted" label="是否有效">
                    <template></template>
                </el-table-column>
                <el-table-column prop="cat_level" label="排序"></el-table-column>
                <el-table-column label="操作" width="290">
                    <template v-slot="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>-->
            <tree-table
                    :data="goodsCateList"
                    :columns="columns"
                    :selection-type="false"
                    :expand-type="false"
                    show-index
                    index-text="#"
                    border
                    :show-row-hover="false">
                <template v-slot:isValid="scope">
                    <i v-if="scope.row.cat_deleted === false" class="el-icon-success"></i>
                    <i v-else class="el-icon-error"></i>
                </template>
                <template #level="scope">
                    <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag v-else-if="scope.row.cat_level === 1" type="success">二级</el-tag>
                    <el-tag v-else type="warning">三级</el-tag>
                </template>

                <template #operate="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showSetCateDialog(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCate(scope.row)">删除</el-button>
                </template>

            </tree-table>

            <!--分页-->
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-size="queryInfo.pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </el-card>

        <!--添加分类对话框-->
        <el-dialog
                title="提示"
                :visible.sync="addCateDialogVisible"
                width="50%" @close="addCateDialogClosed">
            <el-form :model="addCateForm" :rules="CateRules" ref="addCateRef" label-position="right" label-width="100px">
                <el-form-item prop="cat_name" label="分类名称：">
                    <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类：">
                    <el-cascader
                            v-model="selectedKeys"
                            :options="parentCateList"
                            :props="cascaderProps"
                            @change="parenCatChange"
                            clearable></el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="addCateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCate">确 定</el-button>
        </span>
        </el-dialog>
        <!--编辑分类对话框-->
        <el-dialog
                title="提示"
                :visible.sync="setCateDialogVisible"
                width="50%" @close="setCateDialogClosed">
            <el-form :model="currentCate" :rules="CateRules" ref="setCateRef" label-position="right" label-width="100px">
                <el-form-item prop="cat_name" label="分类名称：">
                    <el-input v-model="currentCate.cat_name"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
            <el-button @click="setCateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="setCate">确 定</el-button>
        </span>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "Cate",
        data(){
            return {
                setCateDialogVisible:false,
                addCateDialogVisible:false,
                goodsCateList:[],
                queryInfo:{
                    type: 3,
                    pagenum: 1,
                    pagesize: 5
                },
                total:0,
                columns:[
                    {label:'分类名称',prop:'cat_name'},
                    {
                        label: '是否有效',
                        prop:'cat_deleted',
                        type:'template',
                        template:'isValid'
                    },
                    {
                        label: '排序',
                        prop:'cat_level',
                        type:'template',
                        template:'level'
                    },
                    {
                        label:'操作',
                        type:'template',
                        template:'operate'
                    }
                ],
                CateRules:{cat_name: [{required:true,message:"分类名称不能为空",trigger:"blur"}]},
                addCateForm:{
                    cat_name:'',
                    cat_pid: 0,
                    cat_level: 0
                },
                //级联选择器cascader数据
                parentCateList:[],
                cascaderProps:{
                    value:'cat_id',
                    label:'cat_name',
                    children:'children',
                    expandTrigger: 'hover',
                    checkStrictly: true
                },
                selectedKeys:[],
                currentCate:{}

            }
        },
        created() {
            this.getGoodsCateList()
        },
        methods:{
            async getGoodsCateList(){
                const {data:res} = await this.$http.get('/categories',{params:this.queryInfo})
                if(res.meta.status !== 200) return this.$message.error("获取商品分类失败")
                this.goodsCateList = res.data.result
                this.total = res.data.total
                //console.log(this.goodsCateList)
            },
            handleCurrentChange(newPage){
                this.queryInfo.pagenum = newPage
                this.getGoodsCateList()
            },
            //获取父级分类列表
            async getParentCateList(){
                const {data:res} = await this.$http.get('/categories',{params:{type:2}})
                //console.log(res)
                if(res.meta.status !== 200) return this.$message.error("获取分类失败")
                this.parentCateList = res.data
                //console.log(this.parentCateList)
            },
            //父级分类发生变化
            parenCatChange(){
                //根据selectedKeys的长度来判断他是几级
                //console.log(this.selectedKeys)
                if (this.selectedKeys.length > 0){
                    this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length-1]
                    this.addCateForm.cat_level = this.selectedKeys.length
                    console.log(this.addCateForm)
                }else{
                    this.addCateForm.cat_id = 0
                    this.addCateForm.cat_level = 0
                }
                //console.log(this.selectedKeys)
            },
            //打开添加分类对话框
            showAddCateDialog(){
                this.getParentCateList()
                this.addCateDialogVisible=true
            },
            //关闭添加分类对话框
            addCateDialogClosed(){
                this.addCateForm.cat_id = 0
                this.addCateForm.cat_level = 0
                this.selectedKeys=[]
                this.$refs.addCateRef.resetFields()
            },
            //添加分类
            addCate(){
                this.$refs.addCateRef.validate(async (valid)=>{
                    if(!valid) return this.$message.error("请正确填写分类信息")
                    const {data:res} = await this.$http.post('/categories',this.addCateForm)
                    //console.log(res)
                    if(res.meta.status !== 201) return this.$message.error("添加分类失败")
                    this.$message.success("添加分类成功")
                    this.getGoodsCateList()
                    this.addCateDialogVisible = false
                })
            },
            //打开编辑分类对话框
            showSetCateDialog(cate){
                this.currentCate = cate
                this.setCateDialogVisible = true
            },
            //关闭编辑分类对话框
            setCateDialogClosed(){
                this.currentCate = {}
            },
            //编辑分类
            setCate(){
                this.$refs.setCateRef.validate(async (valid)=>{
                    if (!valid) return
                    const {data:res} = await this.$http.put('/categories/'+this.currentCate.cat_id,{cat_name:this.currentCate.cat_name})
                    //console.log(res)
                    if (res.meta.status !== 200) return this.$message.error("编辑分类失败")
                    this.$message.success("编辑分类成功")
                    this.getGoodsCateList()
                    this.setCateDialogVisible = false
                })
            },

            async removeCate(cate){
                const removeCateConfirm = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)
                if(removeCateConfirm !== 'confirm') return this.$message.info('已取消操作')
                const {data:res} = await this.$http.delete('/categories/'+cate.cat_id,{cat_name:cate.cat_name})
                //console.log(res)
                if(res.meta.status !== 200) return this.$message.error("删除分类失败")
                this.$message.success("删除分类成功")
                this.getGoodsCateList()
            }

        }

    }
</script>

<style lang="less" scoped>
    .el-row {
        margin-bottom: 15px;
    }
    .el-cascader    {
        width: 100%;
    }
</style>
